<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<title>Moritz Petersen &ndash; Photos</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(".photos img").tooltip({
    tip:      ".tooltip",
    position: "bottom center"
  });
  $("#messages li").delay(2500).fadeOut("slow", function() {
    $("#messages").hide();
  });
});
</script>
</head>
<body>

<div id="header">
<div>
<h1><a href="#">Moritz Petersen</a></h1>
<ul>
  <li><a href="#" class="selected">Photos</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Coding</a></li>
  <li><a href="#">About</a></li>
</ul>
</div>
</div>

<div id="menu">
<ul>
  <li><a href="#" class="selected">Kuba</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
  <li><a href="#">Mailand</a></li>
</ul>
</div>

<div id="messages">
<ul>
  <li>This is a message.</li>
  <li>This is a message.</li>
</ul>
</div>

<div id="content">

<div class="photos">
<ul>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_m.jpg" alt="Photo"/></a><div class="tooltip">This is a long tooltip text that should wrap. What exactly happens if...<a href="#">view</a></div></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_m.jpg" alt="Photo"/></a><div class="tooltip">Photo<a href="#">view</a></div></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_m.jpg" alt="Photo"/></a><div class="tooltip">Photo<a href="#">view</a></div></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_m.jpg" alt="Photo"/></a><div class="tooltip">Photo<a href="#">view</a></div></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_m.jpg" alt="Photo"/></a><div class="tooltip">Photo<a href="#">view</a></div></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_m.jpg" alt="Photo"/></a><div class="tooltip">Photo<a href="#">view</a></div></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_m.jpg" alt="Photo"/></a><div class="tooltip">Photo<a href="#">view</a></div></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_m.jpg" alt="Photo"/></a><div class="tooltip">Photo<a href="#">view</a></div></li>
</ul>
</div>

<div class="photos">
<ul>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_l.jpg" alt="Photo"/></a></li>
</ul>
</div>

<div class="description">
  <p>Hello World!</p>
</div>

<div class="photos">
<ul>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
  <li><a href="#"><img src="http://photos.moritzpetersen.de/gallery/photo/5052_s.jpg" alt="Photo"/></a></li>
</ul>
</div>

<form>
  <div>
    <b>Upload photo</b> <input type="file"/>
    <input type="submit" value="Upload"/>
  </div>
</form>
<form>
  <div>
    <input type="submit" value="Save"/>
  </div>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>ID</th>
        <th>Name</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="nopad"><a href="#"><img class="photo" src="http://photos.moritzpetersen.de/gallery/photo/5052_t.jpg" alt="Photo"/></a></td>
        <td>1443</td>
        <td>Photo</td>
        <td><textarea name="t"></textarea></td>
      </tr>
    </tbody>
  </table>
  <div>
    <input type="submit" value="Save"/>
  </div>
</form>

</div>

<div id="footer">

</div>

</body>
</html>